<template>
  <div class="row">
    <div class="col-xs-12">
      <Portlet title="订单信息">
        <table class="table show-table table-align-middle">
          <tbody>
          <tr>
            <td width="140">服务订单号：</td>
            <td width="18%">{{chOrder.orderNo}}</td>
            <td width="120">货物来源:</td>
            <td width="18%">{{chOrder.storageTypeCode | filterDataBaseDictionary}}</td>
            <td width="120">商家名称:</td>
            <td width="18%">{{chOrder.cargoOwner | filterDataBaseDictionary}}</td>
            <td width="120">订单状态:</td>
            <td width="18%">{{chOrder.orderState | filterDataBaseDictionary}}</td>
          </tr>
          <tr v-if="chOrder.warehouse">
            <td>入库仓:</td>
            <td colspan="7">{{ chOrder.warehouse }}</td>
          </tr>
          </tbody>
        </table>
      </Portlet>
      <Portlet title="服务信息">
        <table class="table show-table table-align-middle">
          <tbody>
          <tr>
            <td width="120">基础服务：</td>
            <td width="80%">{{chOrder.service}}</td>
          </tr>
          <tr>
            <td width="120">增值服务：</td>
            <td width="80%">{{chOrder.addedService}}</td>
          </tr>
          </tbody>
        </table>
      </Portlet>
      <Portlet title="用户信息">
        <table class="table show-table table-align-middle">
          <tbody>
          <tr>
            <td width="120">用户姓名：</td>
            <td width="18%">{{orderConsigneeInfo.consigneName}}</td>
            <td width="120">用户电话:</td>
            <td width="20%">{{orderConsigneeInfo.consignePhone}}</td>
            <td width="120">有无电梯:</td>
            <td width="18%">{{orderConsigneeInfo.elevator ? '有' : '无'}}</td>
            <td width="120">楼层</td>
            <td width="18%">{{orderConsigneeInfo.floor}}</td>
          </tr>
          <tr>
            <td >用户备注：</td>
            <td >{{orderConsigneeInfo.consigneMemo}}</td>
            <td>用户地址:</td>
            <td>{{orderConsigneeInfo.consigneProvince}} {{orderConsigneeInfo.consigneCity}} {{orderConsigneeInfo.consigneDistrict}} {{orderConsigneeInfo.consigneAddress}}</td>
            <td>预约时间:</td>
            <td>{{chServiceAppointmentDispatch.start | unixTimestampFilter('YYYY/MM/DD')}} {{chServiceAppointmentDispatch.timeInterval}}</td>
          </tr>
          </tbody>
        </table>
      </Portlet>
      <Portlet title="提货信息">
        <table class="table show-table table-align-middle">
          <tbody>
          <tr>
            <td width="120">提货联系人：</td>
            <td width="20%">{{chOrder.pickUpName}}</td>
            <td width="120">提货联系电话:</td>
            <td width="20%">{{chOrder.pickUpPhone}}</td>
            <td width="120">提货备注：</td>
            <td width="20%" colspan="3">{{chOrder.pickUpMemo}}</td>
          </tr>
          <tr>
            <td width="120">提货地址:</td>
            <td width="20%" colspan="7">{{chOrder.pickUpProvince}} {{chOrder.pickUpCity}} {{chOrder.pickUpDistrict}} {{chOrder.pickUpAddress}}</td>
          </tr>
          </tbody>
        </table>
      </Portlet>
      <Portlet title="货物信息">
        <div class="row">
          <p  style="margin-left:1%">产品类型：{{getType(chOrder.productType)}}</p>
        </div>
        <el-table
          border
          max-height="500"
          :data="productExtBeans"
          class="text-center"
          :summary-method="getSummaries"
          show-summary
        >
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="manufacturerName"
            label="厂家名称"
          >
          </el-table-column>
          <el-table-column
            prop="productNo"
            label="产品编号">
          </el-table-column>
          <el-table-column
            prop="productName"
            width="250"
            label="产品名称">
          </el-table-column>
          <el-table-column
            prop="roomArea"
            label="房间区域">
          </el-table-column>
          <el-table-column
            prop="productUseNum"
            label="可用库存">
            <template slot-scope="scope">
              {{ scope.row.productUseNum ? scope.row.productUseNum : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="arriveNum"
            label="到件产品数量">
            <template slot-scope="scope">
              {{ scope.row.arriveNum ? scope.row.arriveNum : '/' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="proudctNum"
            label="产品数量">
          </el-table-column>
          <el-table-column
            prop="proudctPackNum"
            label="包件数量">
          </el-table-column>
          <el-table-column
            prop="installFee"
            label="安装费用">
          </el-table-column>
          <el-table-column
            prop="memo"
            label="备注">
          </el-table-column>
        </el-table>
      </Portlet>
      <Portlet title="费用信息">
        <el-table
          border
          max-height="500"
          :data="orderCosts"
          class="text-center"
        >
          <el-table-column
            prop="clearingObjectName"
            label="结算主体"
          >
          </el-table-column>
          <el-table-column
            prop="serviceNo"
            label="费用名称">
            <template slot-scope="scope">
              {{ orderCosts[scope.$index]['serviceNo'] | filterDataBaseDictionary}}
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="应收金额">
          </el-table-column>
        </el-table>
      </Portlet>
      <Portlet v-if="chServiceCollectionCostList.length > 0" title="代收款费用信息">
        <table class="table show-table table-align-middle">
          <tbody>
          <tr v-for="(item, index) in chServiceCollectionCostList" :key="index">
            <td width="120">{{ item.costName }}：</td>
            <td width="80%">{{item.money}}元</td>
          </tr>
          </tbody>
        </table>
      </Portlet>
      <Portlet title="备注信息">
        <table class="table show-table table-align-middle">
          <tbody>
          <tr>
            <td width="120">派工单号：</td>
            <td width="80%">{{chOrder.outNo}}</td>
          </tr>
          <tr>
            <td width="120">订单备注：</td>
            <td width="80%">{{chOrder.memo}}</td>
          </tr>
          </tbody>
        </table>
      </Portlet>
    </div>
  </div>
</template>
<script>
import Portlet from '@/components/base/Portlet'
import {httpGetResponse} from '@/service/dataService'
import PackageTable from '@/components/businessBase/PackageTable'
import {unixTimestampFilter, filterDataBaseDictionary, decimalNumFilter} from '@/assets/scripts/base/filters'
import {dotData} from '@/assets/scripts/base/functions'
export default {
  name: 'WarehousingShow',
  components: {
    Portlet,
    PackageTable
  },
  filters: {
    decimalNumFilter,
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      tabIndex: 1,
      id: this.$route.params.id,
      chOrder: {},
      orderConsigneeInfo: {},
      chServiceAppointmentDispatch: {},
      orderCosts: [],
      productExtBeans: [],
      orderService: [],
      orderNodes: [],
      chServiceCollectionCostList: []
    }
  },
  created() {
    this.getDetail()
  },
  computed: {
  },
  methods: {
    getDetail() {
      httpGetResponse('/ms-terminal-order/orderData/getOrderDatails', {orderId: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.chOrder = response.data.chOrder || {}
        this.orderConsigneeInfo = response.data.chOrderConsigneeInfo || {}
        this.orderCosts = response.data.orderCosts || []
        this.productExtBeans = response.data.productExtBeans || []
        this.chServiceAppointmentDispatch = response.data.chServiceAppointmentDispatch || {}
        // 代收款费用信息
        this.chServiceCollectionCostList = dotData(response, 'data.chServiceCollectionCostList') || []
      })
      httpGetResponse('/ms-terminal-order/orderData/getOrderNodes', {orderId: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.orderNodes = response.data || []
      })
      httpGetResponse('/ms-terminal-order/orderData/getServiceOrders', {orderId: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.orderService = response.data || []
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        const values = data.map(item => Number(item[column.property]))
        if (index === 0) {
          sums[index] = '合计'
        } else {
          if (column.property === 'proudctNum' || column.property === 'proudctPackNum' || column.property === 'installFee') {
            let temp = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = decimalNumFilter(temp, (column.property === 'proudctNum' || column.property === 'proudctPackNum') ? 0 : 2)
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    getType(num) {
      if (num === 1) {
        return '标准产品'
      }
      if (num === 2) {
        return '通用产品'
      }
      if (num === 3) {
        return '自定义产品'
      }
    }
  }
}
</script>
